<!--
 * @Author: meifeng mei.feng@asiainfo-sec.com
 * @Date: 2023-09-14 15:06:18
 * @LastEditors: meifeng mei.feng@asiainfo-sec.com
 * @LastEditTime: 2024-04-28 15:27:33
 * @FilePath: \admin_vue\src\views\T13.vue
 * @Description
 *
 * Copyright (c) 2023 by ${meifeng}, All Rights Reserved.
-->

<template>
    <div class="t13_wrap">

        <div class="list-label">
            <el-button v-for="item in arr" :key="item.value" @click="handleClick(item.label, item.value)">
                {{ item.label }}
            </el-button>
            <el-button @click="pre">上一页</el-button>
            <el-button @click="next">下一页</el-button>
            <el-input style="width: 80px; margin-left: 20px;" v-model="label"></el-input>
            <el-input style="width: 80px; margin-left: 20px;" v-model="page"></el-input>
        </div>
        <div class="run-py">
            <el-button :loading="loading" type="success" @click="runPythonScript">执行Python</el-button>
        </div>
        <el-row>
        <el-col :span="8" v-for="(image,index) in images" :key="index + 'im'">
            <template v-if="!isProduction">
                <el-image
                :src="require('@/express_app/py/image/'+ area + '/' + page + '/' +image)"
                :preview-src-list="images.map(img => require('@/express_app/py/image/'+ area + '/' + page + '/' +img))">
                </el-image>
            </template>
            <template v-else>
                <el-image
                :src="'/'+ area + '/' + page + '/' +image"
                :preview-src-list="images.map(img => '/'+ area + '/' + page + '/' +img)">
                </el-image>
            </template>
      </el-col>
    </el-row>
    <div class="tip" v-if="true">
        <p>提示：1.需要安装python </p>
        <p>2. pip install -i https://pypi.tuna.tsinghua.edu.cn/simple playwright</p>
        <p>3. pip install -i https://pypi.tuna.tsinghua.edu.cn/simple  lxml pillow</p>
        <p>4. playwright install chromium 下载驱动</p>
        <p>5. @/express/express_app 文件夹下</p>
        <p>npm i</p>
        <p>npm start</p>
        </div>
    </div>
</template>
<script>

export default {
    name: 'T13',
    data() {
        return {
            isProduction: process.env.NODE_ENV === 'production',
            lightboxUrl: '',
            images: [],
            loading: false,
            area: '',
            label: '',
            page: 1,
            arr: [
                { label: '美女', value: '4kmeinv' },
                { label: '风景', value: '4kfengjing' },
                { label: '游戏', value: '4kyouxi' },
                { label: '动漫', value: '4kdongman' },
                { label: '影视', value: '4kyingshi' },
                { label: '明星', value: '4kmingxing' },
                { label: '汽车', value: '4kqiche' },
                { label: '动物', value: '4kdongwu' },
                { label: '人物', value: '4krenwu' },
            ],
        }
    },
    computed: {

    },
    mounted() {
        console.log(process.env.NODE_ENV)
        this.area = '4kdongman'
        this.label = '动漫'
        this.loadImages()
    },

    methods: {
        openLightbox(img) {
            this.lightboxShow = true
            this.lightboxUrl = img
        },
        handleClick(l, v) {
            this.label = l
            this.area = v
        },
        next() {
            this.page++
        },
        pre() {
            if (this.page > 1) {
                this.page--
            }
        },
        runPythonScript() {
            this.$message.info('采集大约需要2分钟，请耐心等待')
            this.loading = true
            this.images = []
            this.axios.get('/runPy', { baseURL: '/py', params: { area: this.area, page: this.page } })
            .then(response => {
                console.log(response.data) // 处理服务器返回的数据
                this.loadImages()
            })
            .catch(error => {
                this.loadImages()
                console.error(error)
            })
        },

        // require.context 这个方法不接受变量
        loadImages() {
            const folderPath = `./py/image/${this.area}/${this.page}/`
            this.axios.get('/runPy/images', { baseURL: '/py', params: { folderPath } })
            .then(response => {
                console.log(response.data) // 处理服务器返回的数据
                this.images = []
                response.data.forEach(key => {
                    this.images.push(key)
                })
                this.loading = false
            })
            .catch(error => {
                this.$message.info('请按照下面提示安装环境吧')
                console.error(error)
            })
        },
        // 这个方法是错误的，require是不接受变量的，不经过webpack的
        // loadImages() {
        // let url = `@/express/express_app/py/image/${this.area}/${this.page}/`
        // let url = '《仙剑问情女神》蒙眼美女 画师 炼丹 高清无水印原图4K动漫壁纸.png'
        // this.images.push(
        //     url
        // )
        // const images = require.context('../express/express_app/py/image/4kdongman/1/', false, /\.(png|jpe?g|gif|svg)$/)

        // images.keys().forEach(key => {
        //     this.images.push({
        //         url: require('@/express/express_app/py/image/4kdongman/1/' + key.substring(2)),
        //     })
        // })
        // },
    },
    destroyed() {

    },
}
</script>
<style scoped>
.t13_wrap {
 height: 100%;
 overflow: auto;
}
.t13_wrap .tip{
    padding: 20px;
    font-size: 16px;
}
.list-label {
    padding: 20px;
}
.run-py {
    padding: 20px;
}
</style>